import 'package:flutter/material.dart';
import '../../class/controller/product_detail.dart';
 import '../../manger/cached_image_widget.dart';

class ProductGridItem extends StatelessWidget {
  final int spuId;
  final String name;
  final String pic;

  const ProductGridItem({
    super.key,
    required this.spuId,
    required this.name,
    required this.pic,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => ProductDetailPage(spuId: spuId),
          ),
        );
      },
      child: LayoutBuilder(
        builder: (context, constraints) {
          final contentWidth = constraints.maxWidth;
          final imageWidth = contentWidth - 50;

          return Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
            ),
            child: Column(
              children: [
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  alignment: Alignment.center,
                  child: SizedBox(
                    width: imageWidth,
                    height: imageWidth,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12),
                      child: CachedImage(
                        imageUrl: pic,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 12, left: 5, right: 5, bottom: 10),
                  height: 40,
                  alignment: Alignment.center,
                  child: Text(
                    name,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      fontSize: 14,
                      color: Color(0xFF000000),
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
